<template>
	<view class="grouperOrder">
		<view class="page_top_box">
			<image class="icon-36" src="../../static/images/icon/icon_back_left.png"></image>
			<view class="pageTitle">自提点订单</view>
			<view class="user_op_box">
				<view class="op_item">
					<image class="icon-36" src="../../static/images/icon/icon_search.png" mode=""></image>
					<view class="op_item_name">搜索</view>
				</view>
			</view>
		</view>
		<NavTabBar :tabLists="orderStatus" ref="navTabBar" @handleChange="changCurTabs"></NavTabBar>
		<view class="oder_list">
			<view class="goods_item" v-for="item in orderList.lists"><OrderItem :isGrouper="true" :itemData="item" @changeOrderStatus="initGetList"></OrderItem></view>
		</view>
	</view>
</template>

<script>
import NavTabBar from '../../components/navTabBar/navTabBar.vue';
import OrderItem from '../../components/orderItem/orderItem.vue';
import com from '../../mixin/index.js';
export default {
	components: {
		NavTabBar,
		OrderItem
	},
	mixins: [com],

	data() {
		return {
			orderStatus: [
				{
					name: '全部',
					status: 'all'
				},
				{
					name: '待付款',
					status: 'unpay'
				},
				{
					name: '待配送',
					status: 'payed'
				},
				{
					name: '配送中',
					status: 'deliver'
				},
				{
					name: '待评价',
					status: 'wait_comment'
				},
				{
					name: '已完成',
					status: 'done'
				}
			],
			timePickerShow: false,

			page: {
				page: 1,
				page_size: 4
			},
			orderList: {
				lists: [],
				total: 1,
				total_page: 0
			},
			curTabsObj: {}
		};
	},
	onLoad(val) {
		if (val.status) {
			let status = val.status;
			console.log(val, 'sasa');
			this.curTabsObj = this.orderStatus.find((item, index) => {
				if (item.status == status) {
					this.$refs.navTabBar.currentTab = index;
					return item;
				}
			});
			// this.tabLists.indexOf(curTabsObj.name);
		}
		this.getTeamOrderList();
	},
	methods: {
		changCurTabs(val) {
			console.log(val, '切换了 aaaaaaaa');
			this.curTabsObj = this.orderStatus[val];
			this.initGetList();
		},
		//初始化重新获取
		initGetList() {
			this.page = {
				page: 1,
				page_size: 4
			};
			this.orderList = {
				lists: [],
				total: 1,
				total_page: 0
			};
			this.getTeamOrderList();
		},
		getTeamOrderList() {
			console.log(this.curTabsObj, 'sssssssss');
			let params = {
				status: this.curTabsObj.status,
				keyword: '',
				start_time: '',
				end_time: '',
				...this.page
			};
			this.getList('orderList', 'getTeamOrderList', 'page', params);
		}
	}
};
</script>

<style lang="scss">
.grouperOrder {
	min-height: 100vh;
	padding: 24rpx;
	background-color: #f9f9f9;
	.page_top_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;
		.pageTitle {
			padding-left: 80rpx;
			font-size: 34rpx;
			font-weight: 500;
			color: #333333;
		}
		.user_op_box {
			display: flex;
			align-items: center;
			.op_item {
				text-align: center;
				margin-right: 20rpx;
				&:nth-last-child(1) {
					margin-right: 0;
				}
				.op_item_name {
					font-size: 20rpx;
					color: #333;
				}
			}
		}
	}
	.oder_list {
		.goods_item {
			margin-bottom: 20rpx;
		}
	}
}
</style>
